/**
 * TextProperty module
 */

 var React = require("react");
 var tool = require("../../../utils/tool");
 var storage = require("../../../utils/storage");
 var ColorPicker = require("./ColorPicker");
 var consts = require("../../../utils/consts");
 var CommonProperty = require("./CommonProperty");
// var autoSaveProvider = require("../provider/autoSaveProvider");
 var TextProperty = React.createClass({
    mixins: [CommonProperty],
    getInitialProps: function (){
        return {
            root: {},
            parent: {},
            widget: {}
        }
    },
    initElements: function (){
        this.elements = {
            dropdownMenu: $(this.refs.dropdownMenu)
        };
    },
    componentWillMount: function (){
        this.fontSizes = consts.DEFAULT_FONT_SIZES;

        var widget = this.props.widget;
        this.storeData = widget ? $.extend({}, widget) : {};
    },
    componentWillReceiveProps: function (nextProps){
        var widget = nextProps.widget;
        this.storeData = $.extend({}, widget);
    },
    componentDidMount: function (){
        this.initElements();
    },
    handleOnToggleDropdown: function (){
        this.elements.dropdownMenu.toggleClass("open");
    },
    handleOnInputBlur: function (){
        const {updateWidget} = this.props;
        if (!tool.isEmptyObject(this.storeData)){
            this.storeData.text = this.storeData.text.replace(/<.*?>/ig, "");
            var fontSize = this.storeData.t_font_size;
            if (!parseInt(fontSize) || parseInt(fontSize) < 8){
                fontSize = 12;
                this.storeData.t_font_size = fontSize;
            }
            updateWidget(this.storeData);
//            parent.updateWidget(this.storeData);
        }
    },
    handleOnChangeText: function (e){
        const {setState,updateWidget} = this.props;
        let target = $(e.target || e.srcElement);
        let text = target.val();
        let widget = {
            ...this.props.widget,
            text: text.replace(/<.*?>/ig,""),
            stereoText: text.replace(/<.*?>/ig,""),
            propertyChanged: true,
        };
        setState({selectedWidget: widget})
        updateWidget(widget);

    },
    handleOnCheckFontsize: function (e){
        const {widget,updateWidget,setState} = this.props;
        let data = widget;
        let element = $(e.target || e.srcElement);

        let isInput = element.is("input"), isLi = element.is("li");

        element = isInput ? element :
                      isLi ?
                          element :
                              element.parents("li");

        let type = element.attr("name"), fontSize = isInput ? element.val() : element.attr("data-size").replace(/pt/g, "");

        if(!parseInt(fontSize) || parseInt(fontSize) < 8){
            fontSize = 12;
        }
        let newData = "{\"" + type + "\":\"" + fontSize + "\"}";
        newData = JSON.parse(newData);

        data = $.extend({}, data, newData);

        // 标识字体已更改
        data.propertyChanged = true;

//        autoSaveProvider.update(data, {
//            page_id: storage.data.page.page_id
//        });

        setState({selectedWidget: data})
        updateWidget(data);

        isLi = element.is("li");
        isLi && this.handleOnToggleDropdown();
        // Text组件监听
        $("#moving_box").trigger("fontSizeChanged");
    },
    handleOnChangeFontsize: function(e){
        const {widget,setState} = this.props;
        var element = $(e.target || e.srcElement);
        var type = element.attr("name"), fontSize = element.val();
        var root = this.props.root;

        var newData = {};
        newData[type] = fontSize;

        var data = widget;
        data = $.extend({}, data, newData);
        this.storeData = data;
        // 标识字体已更改
        data.propertyChanged = true;
        setState({
            selectedWidget: data
        });
        // Text组件监听
        $("#moving_box").trigger("fontSizeChanged");
    },
    render: function (){
        var root = this.props.root;
        var widget = this.props.widget;
        return (
            <div className="text-property widget-meta-default">
                <div className="rowlist zitigroup">
                    <label className="ziti">{$._('Font size')}</label>
                    <div className="input-group" data-font-size>
                        <input name="t_font_size" onBlur={this.handleOnInputBlur} onChange={this.handleOnChangeFontsize} type="number" className="form-control font-size-input" min='8' value={widget.t_font_size} />
                        <div className="input-group-btn">
                            <button onClick={this.handleOnToggleDropdown} type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i className="glyphicon glyphicon-chevron-down"></i>
                            </button>
                            <ul ref="dropdownMenu" className="dropdown-menu" role="menu">
                            {
                                this.fontSizes.map(function (fontSize){
                                    return (
                                        <li name="t_font_size" onClick={(e) => this.handleOnCheckFontsize(e)} data-size={fontSize} key={fontSize}>
                                            <a href="#">{fontSize}</a>
                                        </li>
                                    )
                                }.bind(this))
                            }
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="rowlist zitigroup">
                    <label className="ziti">{$._('Text')}</label>
                    <div className="input-group">
                        <textarea name="text" onChange={this.handleOnChangeText} onBlur={this.handleOnInputBlur} type="text" className="form-control text-input" value={widget.text}></textarea>
                    </div>
                </div>
                <ColorPicker widget={widget} root={root} />
            </div>
        )
    }
 });

 module.exports = TextProperty;
